<!doctype html>
<html class="no-js" lang="zn" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>blog</title>
    <meta name="description" content="博客">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="/assets/img/favicon.ico">
    <!-- CSS here -->
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/assets/css/slicknav.css">
    <link rel="stylesheet" href="/assets/css/flaticon.css">
    <link rel="stylesheet" href="/assets/css/animate.min.css">
    <link rel="stylesheet" href="/assets/css/magnific-popup.css">
    <link rel="stylesheet" href="/assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="/assets/css/themify-icons.css">
    <link rel="stylesheet" href="/assets/css/slick.css">
    <link rel="stylesheet" href="/assets/css/nice-select.css">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/tao/mine.css">
    <script src="/tao/config.js"></script>
</head>
<body background="/assets/img/gallery/section_bg04.jpg">
<!--              前置渲染js              -->
<script th:inline="javascript">
    let tokenSign = [[${token}]];
    if (tokenSign != null && tokenSign.length > 20)
        window.sessionStorage.setItem('token', JSON.stringify(tokenSign));
</script>
<!-- Preloader Start -->
<div id="preloader-active">
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="preloader-inner position-relative">
            <div class="preloader-circle"></div>
            <div class="preloader-img pere-text">
                <img src="/assets/img/logo/logo.png" alt="QAQ">
            </div>
        </div>
    </div>
</div>
<!-- Preloader Start -->
<header>
    <!-- Header Start -->
    <div class="header-area">
        <div class="main-header  header-sticky">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <!-- Logo -->
                    <div class="col-xl-2 col-lg-2 col-md-1">
                        <div class="logo">
                            <a href="/index"><img src="/assets/img/logo/logo.png" alt="QAQ"></a>
                        </div>
                    </div>
                    <div class="col-xl-10 col-lg-10 col-md-10">
                        <div class="menu-main d-flex align-items-center justify-content-end">
                            <!-- Main-menu -->
                            <div class="main-menu f-right d-none d-lg-block">
                                <nav>
                                    <ul id="navigation">
                                        <li><a href="/index" id="url03">首页</a></li>
                                        <li><a href="/resource">资源</a></li>
                                        <li><a href="/followed/token">关注</a></li>
                                        <li><a href="/news/token">消息</a></li>
                                        <li><a href="/my/token" id="url01">我的</a></li>
                                        <li><a href="/editor/token" id="url02">发布帖子</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <div id="isAuth" style="display: inline">
                                <div class="header-right-btn f-right d-none d-xl-block ml-20">
                                    <a href="/login" class="btn header-btn">登录</a>
                                    <a href="/register" class="btn header-btn">注册</a>
                                </div>
                            </div>
                            <!--              导航栏渲染js              -->
                            <script> navStarter() </script>
                        </div>
                    </div>
                    <span style="font-size: xx-small;color: darkgrey" th:text="'访问量:'+${visitorNum}"></span>
                    <!-- Mobile Menu -->
                    <div class="col-12">
                        <div class="mobile_menu d-block d-lg-none"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->
</header>
<main>
    <!--================Blog Area =================-->
    <div class="container">
        <div class="row">
            <div class="col-lg-12 mb-5 mb-lg-0">
                <div class="blog_left_sidebar">
                    <div class="blog_details">
                        <div class="row" style="margin-bottom: 15px">
                            <img th:src="${FILE_SERVER_URL} + ${blog.avatarUrl}" class="taoAvatar">
                            <div style="margin-top: 16px;margin-left: 10px" th:text="${blog.username}"></div>
                        </div>
                        <h2 th:text="${blog.title}" class="text-center"></h2>
                        <div style="width: 100%;height: 2px;background-color: #999999 "></div>
                        <div th:utext="${blog.content}"></div>
                        <div style="width: 100%;height: 8px;"></div>
                        <ul class="blog-info-link">
                            <li style="color: #999999">
                                <script th:inline="javascript">
                                    document.write(timeFmt([[${blog.createDate}]]))
                                </script>
                            </li>
                        </ul>
                        <ul class="blog-info-link">
                            <li><a href="javascript:likes(this)" th:name="${blog.id}" class="likes"
                                   th:style="'color:' + ${blog.active?'#ec5b53':'#999999'}"><i
                                    class="fa fa-heart"></i><span th:text="${blog.likeSum}"></span> 赞</a></li>
                            <li><a href="javascript:comments(this)" class="comments" th:name="${blog.id}"><i
                                    class="fa fa-comments"></i>评论</a></li>
                        </ul>
                        <div th:name="${blog.id}" hidden>
                            <input type="text">
                            <button class="btn btn-primary" style="padding: 15px 15px;" th:name="${blog.id}">发送</button>
                        </div>

                        <div class="about-me">
                            <div class="about-me-caption" style="margin-top: 6px" th:name="${blog.id}">
                                <h5 style="margin-left: 3%" th:each="comment:${blog.comments}">
                                    <div class="row">
                                        <img th:src="${FILE_SERVER_URL} + ${comment.avatarUrl}" class="taoComment">
                                        <div style="margin-top: 3px;margin-left: 5px;font-size: medium"
                                             th:text="${comment.username}"></div>
                                        <span style="margin-top: 3px;margin-left: 5px;font-size: medium">:</span>
                                        <span style="margin-top: 3px;margin-left: 5px;font-size: medium"
                                              th:text="${comment.content}"></span>
                                    </div>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--================Blog Area =================-->
</main>
<footer>
    <!-- Footer Start-->
    <div class="footer-area">
        <div class="container">
            <div class="footer-top footer-padding">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="footer-top-cap text-center">
                            <img src="/assets/img/logo/logo.png" alt="QAQ">
                            <span><a href="#">245149633@qq.com</a></span>
                            <p>以上是作者邮箱,有意见可联系作者</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="row d-flex justify-content-between align-items-center">
                    <div class="col-xl-9 col-lg-8">
                        <div class="footer-copy-right">
                            <p>
                                Copyright &copy;<script>document.write(new Date().getFullYear());</script>
                                All rights reserved | This webSite is made with <i class="fa fa-heart"
                                                                                   aria-hidden="true"></i> by <a
                                    href="http://wytcloud.top" target="_blank">鱼水狩</a>
                                <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2021062754号</a>
                            </p>
                            <p>
                                Copyright &copy;<script>document.write(new Date().getFullYear());</script>
                                All rights reserved | Thanks for view template provider,<a href="https://colorlib.com"
                                                                                           target="_blank">Colorlib</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer End-->
</footer>
<!-- Scroll Up -->
<div id="back-top">
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<!-- JS here -->
<!-- All JS Custom Plugins Link Here here -->
<script src="/assets/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- Jquery, Popper, Bootstrap -->
<script src="/assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-- Jquery Mobile Menu -->
<script src="/assets/js/jquery.slicknav.min.js"></script>

<!-- Jquery Slick , Owl-Carousel Plugins -->
<script src="/assets/js/owl.carousel.min.js"></script>
<script src="/assets/js/slick.min.js"></script>
<!-- One Page, Animated-HeadLin -->
<script src="/assets/js/wow.min.js"></script>
<script src="/assets/js/animated.headline.js"></script>
<script src="/assets/js/jquery.magnific-popup.js"></script>

<!-- Nice-select, sticky -->
<script src="/assets/js/jquery.nice-select.min.js"></script>
<script src="/assets/js/jquery.sticky.js"></script>

<!-- contact js -->
<script src="/assets/js/contact.js"></script>
<script src="/assets/js/jquery.form.js"></script>
<script src="/assets/js/jquery.validate.min.js"></script>
<script src="/assets/js/mail-script.js"></script>
<script src="/assets/js/jquery.ajaxchimp.min.js"></script>

<!-- Jquery Plugins, main Jquery -->
<script src="/assets/js/plugins.js"></script>
<script src="/assets/js/main.js"></script>
<script>
    $(function () {
        $(".likes").click(function () {
            let token = window.sessionStorage.getItem("token")
            let color = $(this).css("color")
            let url = ""
            if (color == "rgb(153, 153, 153)") url = "/likeOneBlog"
            else url = "/unLikeOneBlog"
            if (token != null && token.length > 20) {
                let blogId = $(this).attr("name");
                $.post({
                    url: url,
                    data: {
                        "userToken": token.substring(1, token.length - 1),
                        "blogId": blogId
                    },
                    success: function (res) {
                        let num = parseInt(document.getElementsByName(blogId)[0].getElementsByTagName("span")[0].innerHTML)
                        if (color == "rgb(153, 153, 153)") {
                            document.getElementsByName(blogId)[0].getElementsByTagName("span")[0].innerHTML = num + 1;
                            document.getElementsByName(blogId)[0].style.color = "#ec5b53"
                        } else {
                            document.getElementsByName(blogId)[0].getElementsByTagName("span")[0].innerHTML = num - 1;
                            document.getElementsByName(blogId)[0].style.color = "#999999"
                        }
                    }
                })
            } else {
                alert("请先登录")
            }
        })
        $(".comments").click(function () {
            let token = window.sessionStorage.getItem("token")
            if (token != null && token.length > 20) {
                let val = $(this).attr("name");
                let c = document.getElementsByName(val)[2]
                if (c.getAttribute("hidden") != null) {
                    c.removeAttribute("hidden");
                } else {
                    c.setAttribute("hidden", "hidden");
                }
            } else {
                alert("请先登录")
            }
        })
        $(".btn-primary").click(function () {
            let token = window.sessionStorage.getItem("token")
            if (token != null && token.length > 20) {
                let blogId = $(this).attr("name");
                let content = document.getElementsByName(blogId)[2].getElementsByTagName("input")[0].value
                $.post({
                    url: "/comment",
                    data: {
                        "userToken": token.substring(1, token.length - 1),
                        "blogId": blogId,
                        "content": content
                    },
                    success: function () {
                        let avatar = document.getElementById("userAvatarImgID").getAttribute("src")
                        let username = document.getElementById("usernameID").innerText
                        document.getElementsByName(blogId)[2].setAttribute("hidden", "hidden");
                        let insert = document.getElementsByName(blogId)[4];
                        let html = '<h5 style="margin-left: 3%">\n' +
                            '  <div class="row">\n' +
                            '      <img src=' + avatar + ' class="taoComment">\n' +
                            '      <div style="margin-top: 3px;margin-left: 5px;font-size: medium">' + username + '</div>\n' +
                            '      <span style="margin-top: 3px;margin-left: 5px;font-size: medium">:</span>\n' +
                            '      <span style="margin-top: 3px;margin-left: 5px;font-size: medium">' + content + '</span>\n' +
                            '  </div>\n' +
                            ' </h5>'
                        insert.innerHTML += html
                    }
                })

            } else {
                alert("请先登录")
            }
        })
    })
</script>
</body>
</html>